<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>

    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-theme.css">
</head>
<body>
<br><br><br>
<div class="container col-md-6 col-md-offset-3 row-no-gutters" style="background: #FFF888">

    <br><br><br>
    <div style="font-size: 30px; color: #363636; font-family: 华文中宋,serif; text-align: center">QG 贴吧</div>
    <br>

    <div class="row" style="font-size: 17px">
        <label class="col-md-2  col-md-offset-1">用户名：</label>
        <input class="col-md-6" type="text" style="padding: 5px" name="userName" id="userName"/>
    </div>
    <br>

    <div class="row" style="font-size: 17px">
        <label class="col-md-2  col-md-offset-1">密码：</label>
        <input class="col-md-6" type="password" style="padding: 5px" name="userPass" id="userPass"/>
    </div>
    <br>

    <div class="row" style="font-size: 17px">
        <label class="col-md-2  col-md-offset-1">验证码：</label>
        <input class="col-md-3" type="text" style="padding: 5px" name="userCode" id="userCode"/>
        <!--显示验证码-->
        <div class="col-md-2 col-md-offset-1" id="code"></div>
    </div>

    <br>

    <div class="row" style="font-size: 17px; display: none" id="postBox">
        <label class="col-md-2  col-md-offset-1">预留邮箱：</label>
        <input class="col-md-6" type="text" style="padding: 5px" name="userPostBox" id="userPostBox"/>
    </div>
    <br>

    <div class="row">
        <label class="col-md-6 col-md-offset-3" style="font-size: 14px; color: #FF0000" id="tip"></label>
    </div>

    <br>
    <div class="row" style="font-size: 17px">
        <button class="col-md-2 col-md-offset-3" id="register" onclick="register()">注册</button>
        <a class="col-md-2" style="font-size: 14px; text-align: center" href="findBackUserPass.html">忘记密码</a>
        <button class="col-md-2 " id="login" onclick="login()">登录</button>
    </div>
    <br><br><br>
</div>

<!--输入判空-->
<script type="text/javascript">

    let userName, userPass, userCode, tip;
    userName = $("#userName");
    userPass = $("#userPass");
    userCode = $("#userCode");
    tip = $("#tip");

    // 存放验证码
    let seCode;

    // 引入验证码
    $("#code").load("html/securityCode.html", function (){
        seCode = nowCode;
        myCallback = getCode;
    });

    // 获取验证码的回调函数
    function getCode(code) {
        seCode = code;
    }

    function register() {
        $("#postBox").show();
        let userPostBox = $("#userPostBox");

        // 注册时要求用户输入预留邮箱
        if (userPostBox.val().length === 0) {
            tip.html("注册用户请预留邮箱");
        } else if (userPostBox.val().length < 10) {
            tip.html("请输入合法的邮箱！");
        } else if (check()) {
            $.post("/QG_PostBar/user?method=register", {"userName": userName.val() , "userPass": userPass.val(), "userPostBox": userPostBox.val()}, function (data) {
                if (data.userName != null) {
                    tip.html("注册成功！请再次输入");
                    userName.val("");
                    userPass.val("");
                    userCode.val("");
                    userPostBox.val("");
                    $("#postBox").hide();
                } else {
                    tip.html("注册失败！用户名已存在");
                }
            }, "json");
        }
    }

    function login() {
        if (check() === true) {
            $.post("/QG_PostBar/user?method=login", {"userName": userName.val() , "userPass": userPass.val()}, function (data) {
                if (data === "success") {
                    window.location.href = "html/postBar.html";
                } else {
                    tip.html("登录失败！用户名或密码错误");
                }
            });
        }
    }

    function check() {

        if (userName.val().length < 3) {
            tip.html("用户名长度必须大于等于 3 ！");
            return false;
        } else if (userPass.val().length < 6) {
            tip.html("密码长度必须大于等于 6 ！");
            return false;
        } else if (userCode.val() === "") {
            tip.html("验证码不能为空！");
            return false;
        } else if (userCode.val() !== seCode) {
            tip.html("验证码错误，请重新输入！");
            return false;
        }
        else return true;
    }
</script>
</body>
</html>